import React, { useRef, useState } from 'react';
import { Button, Tag } from 'antd';
import Drag from 'react-draggable';
import styles from './index.less';

const DragTest = (props: any) => {
  const [activeDrags, setActiveDrags] = useState(0);
  const { height } = props;

  const onStart = () => {
    setActiveDrags(activeDrags + 1);
  };

  const onStop = () => {
    setActiveDrags(activeDrags - 1);
    // console.log('-----------');
  };

  const onClick = (e: any) => {
    // console.log(e.clientX, e.clientY);
    const position = `${e.clientX}-${e.clientY}`;
    // console.log('pos',position);
  };

  const onMouseDown = (e: any) => {
    console.log(e.screenX);
    console.log(e);
  };

  return (
    <Drag
      defaultPosition={{ x: 0, y: 0 }}
      // bounds={{ left: 0, top: 0, right: 100, bottom: height - 100 }}
      onStart={onStart}
      onStop={onStop}
      onMouseDown={onMouseDown}
      allowAnyClick={false}
      defaultClassName={styles.drag}
    >
      <div className={styles.newBtn}>
        <Button
          type="primary"
          shape="circle"
          onDoubleClick={() => console.log(11)}
          onClick={onClick}
          // style={{ zIndex: 10000 }}
        >
          动
        </Button>
      </div>
    </Drag>
  );
};

export default DragTest;
